<template>
  <el-dialog
    v-model="props.open"
    align-center
    :before-close="handleClose"
    title="Shipping Method"
    append-to-body
    width="480"
  >
    <el-radio-group v-model="radio">
      <el-row class="mb-4 head spaceBetween">
        <div class="s1">Delivery Time</div>
        <div class="s2">Cost</div>
        <div class="s3">Carrier</div>
      </el-row>
      <el-row class="mb-4 spaceBetween" @click="onRadio('1')">
        <div class="s1">
          <el-radio label="1">Option 1</el-radio>
        </div>
        <div class="s2">23123</div>
        <div class="s3">23123</div>
      </el-row>
      <el-row class="mb-4 spaceBetween" @click="onRadio('2')">
        <div class="s1"><el-radio label="2">Option 1</el-radio></div>
        <div class="s2">23123</div>
        <div class="s3">23123</div>
      </el-row>
    </el-radio-group>
    <div class="m-l10">
      <el-button @click="smbValue" type="danger">apply</el-button>
    </div>
  </el-dialog>
</template>
<script lang="ts" setup>
import { reactive, ref } from "vue";
// const textarea = ref("");
const props = defineProps(["open"]);
const emits = defineEmits(["handleClose"]);
const radio = ref("1");
const handleClose = () => {
  emits("handleClose");
};
const smbValue = () => {
  console.log(radio);
};
const onRadio = (e: any) => {
  radio.value = e;
  console.log(e);
};
const onSubmit = () => {
  console.log(form, "submit!");
};
</script>
<style lang="scss" scoped>
.jc {
  width: 100%;
  text-align: center;
  margin: 20px 0 -18px 0;
}
::v-deep.el-radio-group {
  width: 100%;
  display: block !important;
  .el-radio {
    width: 100%;
  }
}

.spaceBetween {
  border-bottom: 1px solid #ebeef5 !important;
  height: 40px;
  align-items: center;
  cursor: pointer;
  .s1,
  .s2,
  .s3,
  .s4 {
    width: 30%;
    color: var(--unnamed, #222);

    /* 导航栏/13px-Regular */
    font-size: 13px;
    font-weight: 400;
  }
}
.head {
  color: var(--unnamed, #777);
  border-bottom: 2px solid #777 !important;

  /* 文字/13px-bold */
  font-size: 13px;
  font-weight: 600 !important;
}
::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: #222 !important;
}
.m-l10 {
  margin-top: 40px;
  text-align: center;
}
</style>